<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机端登录页面</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <h1 >手机端登录页面</h1>
    <div v-if="myinfo">欢迎{{myinfo.name}}</div>
    <form v-else>
        账号:<input v-model="user.username"><br>
        密码:<input v-model="user.password" type="password"><br>
        <button @click.prevent="login">登录</button>
    </form>
</div>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            user:{
                username:"", password:""
            },
            myinfo:null
        },
        methods:{
            login(){
                axios.get("/sign/login",{
                    params: this.user
                }).then(res=>{
                    if(res.data.code == 1){
                        this.myinfo = res.data.data;
                        localStorage.setItem("cinema-username", this.user.username);
                        localStorage.setItem("cinema-password", this.user.password);
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            }
        },
        created(){
            if (localStorage.getItem("cinema-username")) {
                this.user.username = localStorage.getItem("cinema-username");
                this.user.password = localStorage.getItem("cinema-password");
                this.login();
            }
        }
    })
</script>
</body>
<style>
    *{
        font-size: 1.7rem;
    }
    #app{
        width: 70vw;
        margin: 10vh auto;
    }
</style>
</html>